<template>
	<view class="recommend" v-if="goodsList.length>0">
		<view class="title">
			<view class="title-left">
				推荐
			</view>
		</view>
		<view class="list flex-between">
			<view class="item" v-for="(item, index) in goodsList" :key="index" @click="toArtistDetails(item.id)">
				<image class="img" :src="item.thumb" mode=""></image>
				<view class="content">
					<view class="content-title">
						{{item.name}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRecommendGoods } from "@/api/public.js"
	export default {
		created(){
			this.getInfo();
		},
		data(){
			return {
				goodsList: [],
			}
		},
		methods: {
			getInfo(){
				getRecommendGoods(1).then(res=>{
					this.goodsList = res.reData.data;
				})
			},
			toArtistDetails(id){
				uni.navigateTo({
					url: "/pages/index/artWorkDetails?id=" + id
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.title{
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		.title-left{
			height: 30rpx;
			color: #666;
			text-align: center;
			padding-left: 24rpx;
		}
	}
	.list{
		width: 690rpx;
		margin: 0 auto;
		flex-wrap: wrap;
		.item{
			width: 330rpx;
			height: 410rpx;
			margin-bottom: 30rpx;
			background: #fffaf5;
			box-shadow: 0rpx 2rpx 4rpx rgba(189, 163, 112, 0.25);
			border-radius: 10rpx;
			.img{
				width: 100%;
				height: 280rpx;
			}
			.content{
				padding: 30rpx;
				.content-title{
					font-size: 28rpx;
					line-height: 28rpx;
					color: #333;
					font-weight: 700;
					margin-bottom: 20rpx;
				}
				.price{
					font-size: 24rpx;
					line-height: 24rpx;
					color: #bd313a;
				}
			}
		}
	}
</style>
